<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <template>
            {$form.html}
        </template>>
    </div>
    <script>
        const myVue = new Vue({
            el: '#app'
        })
    </script>
</body>
</html>



<template>
<el-form ref="ruleForm" :model="formData" class="demo-ruleForm" label-position="right" label-width="120px">
    <el-col
    v-for=" (formobj,index) in formObj"
    v-show="!formobj.notShow"
    :key="index"
    :span="formobj.width ? formobj.width : 24"
    >
    <el-form-item :label="formobj.label" :prop="formobj.prop" :rules="formobj.rules">
        <!-- inupt输入框 -->
        <el-input
        v-if="formobj.input"
        v-model="formData[formobj.prop]"
        size="small"
        :placeholder="formobj.placeholder"
        @input="inputINPUT($event,index,formobj.prop)"
        @change="inputChange($event,index,formobj.prop)"
        />
        <!-- textarea输入框 -->
        <el-input
        v-if="formobj.textarea"
        v-model="formData[formobj.prop]"
        size="small"
        type="textarea"
        :placeholder="formobj.placeholder"
        />
        <!-- select选择器 -->
        <el-select
        v-if="formobj.select"
        v-model="formData[formobj.prop]"
        size="small"
        :placeholder="formobj.placeholder"
        @change="selectChange($event,index,formobj.prop)"
        >
        <el-option v-for="(options, selectIdx) in formobj.options" :key="selectIdx" :label="options.label" :value="options.label" />
        </el-select>
        <!-- select多选 选择器 -->
        <el-select
        v-if="formobj.multiSelect"
        v-model="formData[formobj.prop]"
        size="small"
        multiple
        :placeholder="formobj.placeholder"
        @change="selectChange($event,index,formobj.prop)"
        >
        <el-option v-for="(options, selectIdx) in formobj.options" :key="selectIdx" :label="options.label" :value="options.label" />
        </el-select>
        <!-- select搜索框 -->
        <!-- <el-select
        v-if="formobj.searchSelect"
        v-model="formData[formobj.prop]"
        size="small"

        filterable
        remote
        reserve-keyword
        :placeholder="formobj.placeholder"
        :remote-method="(query)=>remoteMethod(query,index,formobj.prop)"
        :loading="searchSelectLoading"
        @change="selectChange($event,index,formobj.prop)"
        >
        <el-option
            v-for="(item,selectIdx) in formobj.options"
            :key="selectIdx"
            :label="item.label"
            :value="item.value"
        />
        </el-select> -->
        <!-- 日期选择器 -->
        <el-date-picker
        v-if="formobj.date"
        v-model="formData[formobj.prop]"
        value-format="yyyy-MM-dd"
        type="date"
        size="small"
        :placeholder="formobj.placeholder"
        />
        <!-- 时间选择器 -->
        <el-time-picker
        v-if="formobj.time"
        v-model="formData[formobj.prop]"
        value-format="HH:mm:ss"
        format="HH:mm:ss"
        size="small"
        :placeholder="formobj.placeholder"
        />
        <!-- 日期时间选择器 -->
        <el-date-picker
        v-if="formobj.dateTime"
        v-model="formData[formobj.prop]"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="dateTime"
        size="small"
        :placeholder="formobj.placeholder"
        />
        <!-- 年月日时分秒，开始和结束时间 -->
        <el-date-picker
        v-if="formobj.dateTimeRange"
        v-model="formData[formobj.prop]"
        value-format="yyyy-MM-dd HH:mm:ss"
        format="yyyy-MM-dd HH:mm:ss"
        size="small"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        />

        <!-- 时分秒选择器，开始和结束时间 -->
        <!-- <el-time-picker
        v-if="formobj.timePickerIsRange"
        v-model="formData[formobj.prop]"
        value-format="HH:mm:ss"
        format="HH:mm:ss"
        is-range
        size="small"

        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        placeholder="选择时间范围"
        /> -->
        <!-- 年月日选择器 -->
        <!-- <el-date-picker v-if="formobj.datePicker" v-model="formData[formobj.prop]" value-format="yyyy-MM-dd" size="small" :placeholder="formobj.placeholder" /> -->
        <!-- 年月日选择器，开始和介绍年月日 -->
        <!-- <el-date-picker v-if="formobj.datePickerIsRange" v-model="formData[formobj.prop]" value-format="yyyy-MM-dd" type="daterange" size="small"  :placeholder="formobj.placeholder" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" /> -->
        <!-- switch开关 -->
        <el-switch v-if="formobj.switch" v-model="formData[formobj.prop]" size="small" @change="formSwitchChange($event,index,formobj.prop)" />
        <!-- radio单选框 -->
        <el-radio-group v-if="formobj.radio" v-model="formData[formobj.prop]">
        <el-radio v-for="(options, radioIdx) in formobj.options" :key="radioIdx" :label="options.label" :value="options.value" />
        </el-radio-group>
        <!-- checkbox复选框 -->
        <el-checkbox-group v-if="formobj.checkbox" v-model="formData[formobj.prop]">
        <el-checkbox v-for="options in formobj.options" :key="options.value" :label="options.label" />
        </el-checkbox-group>
        <!-- 单个图片上传 --><!-- 如果对象有值就回显，没有值就为空 -->
        <el-upload
        v-if="formobj.image"
        :ref="formobj.prop"
        :headers="myHeaders"
        class="avatar-uploader"
        :action="$store.getters.updateURL+'/attachment/save'"
        :show-file-list="false"
        objbind="cover"
        :on-success="uploadImg"
        >
        <img v-if="image" :src="image" class="avatar">
        <img v-else class="avatar" :src="require('@/assets/icon1.png')" alt="">
        <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过1MB
        </div>
        <div style="font-size: 12px;color: #999999;line-height: 30px;font-weight: 500" />
        </el-upload>

        <!-- 图片集 --><!-- 如果对象有值就回显，没有值就为空 -->
        <el-upload
        v-if="formobj.multiImages"
        :ref="formobj.prop"
        :file-list=" formData[formobj.prop] ? formData[formobj.prop] : []"
        :headers="myHeaders"
        :action="$store.getters.updateURL+'attachment/save'"
        class="avatar-uploader"
        :on-success="(response,file,fileList)=>uploadSuccess(response,file,fileList,formobj.prop,index)"
        list-type="picture-card"
        :auto-upload="true"
        :on-change="changeImages"
        :on-remove="removeImages"
        >
        <i slot="default" class="el-icon-plus" />

        </el-upload>
        <!-- <el-dialog v-if="formobj.upload" :visible.sync="dialogVisible" :modal-append-to-body="false" width="40%">
        <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog> -->
        <!-- 文件 --><!-- 如果对象有值就回显，没有值就为空 -->
        <el-upload
        v-if="formobj.file"
        :ref="formobj.prop"
        :file-list=" formData[formobj.prop] ? formData[formobj.prop] : []"
        :headers="myHeaders"
        :action="$store.getters.updateURL+'attachment/save'"
        class="avatar-uploader"
        :on-success="(response,file,fileList)=>uploadSuccess(response,file,fileList,formobj.prop,index)"
        :auto-upload="true"
        :limit="1"
        :on-exceed="masterFileMax"
        >
        <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
        <!-- 文件集 --><!-- 如果对象有值就回显，没有值就为空 -->
        <el-upload
        v-if="formobj.multiFile"
        :ref="formobj.prop"
        :file-list=" formData[formobj.prop] ? formData[formobj.prop] : []"
        :headers="myHeaders"
        :action="$store.getters.updateURL+'attachment/save'"
        class="avatar-uploader"
        :on-success="(response,file,fileList)=>uploadSuccess(response,file,fileList,formobj.prop,index)"
        :auto-upload="true"
        >
        <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
        <!-- 视频 --><!-- 如果对象有值就回显，没有值就为空 -->
        <el-upload
        v-if="formobj.video"
        :ref="formobj.prop"
        :file-list=" formData[formobj.prop] ? formData[formobj.prop] : []"
        :headers="myHeaders"
        :action="$store.getters.updateURL+'attachment/save'"
        class="avatar-uploader"
        :on-success="(response,file,fileList)=>uploadSuccess(response,file,fileList,formobj.prop,index)"
        :auto-upload="true"
        :limit="1"
        :on-exceed="masterFileMax"
        >
        <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
        <!-- 视频集 --><!-- 如果对象有值就回显，没有值就为空 -->
        <el-upload
        v-if="formobj.multiVideo"
        :ref="formobj.prop"
        :file-list=" formData[formobj.prop] ? formData[formobj.prop] : []"
        :headers="myHeaders"
        :action="$store.getters.updateURL+'attachment/save'"
        class="avatar-uploader"
        :on-success="(response,file,fileList)=>uploadSuccess(response,file,fileList,formobj.prop,index)"
        :auto-upload="true"
        >
        <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
        <!-- 视频集 --><!-- 如果对象有值就回显，没有值就为空 -->
        <!-- <el-upload
        v-if="formobj.file"
        :ref="formobj.prop"
        :accept="formobj.accept ? formobj.accept : 'PNG,JPEG'"
        :file-list=" formData[formobj.prop] ? formData[formobj.prop] : []"
        :action="$store.getters.updateURL+'/attachment/save'"
        :limit="formobj.uploadObj.limit"
        :class="{'hide':formobj.uploadObj.hideUpload || formData[formobj.prop].length==formobj.uploadObj.limit}"
        :on-preview="handlePictureCardPreview"
        :on-remove="(file,fileList)=>handleRemove(file,fileList,formobj.uploadObj.limit,formobj.prop,index)"
        :on-success="(response,file,fileList)=>uploadSuccess(response,file,fileList,formobj.uploadObj.limit,formobj.prop,index)"
        list-type="picture-card"
        :auto-upload="true"
        >
        <i slot="default" class="el-icon-plus" />
        </el-upload> -->

        <!-- 按钮 -->
        <!-- <el-button v-if="formobj.button" size="small"  :loading="formobj.loading" :type="formobj.buttonType || 'primary'" @click="buttonClick(formobj.prop,index)">{{ formobj.placeholder }}</el-button> -->
        <!-- text展示 -->
        <!-- <span v-if="formobj.text" v-text="formData[formobj.prop]" /> -->
        <!-- 计量单位 -->
        <!-- <span v-if="formobj.unit" class="left10">{{ formobj.unit }}</span> -->

    </el-form-item>
    </el-col>
</el-form>
</template>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/tinymce/5.8.2/icons/default/icons.min.js"></script>
<script>

var token = 'Bearer ' + getToken()
export default {
    components: {
        // quillEditor
    },
    props: {
        formObj: {
            type: Array,
            required: true
        },
        formData: {
            type: Object,
            required: true
        }
    },
    data() {
        const uploadFileUrl = this.$store.state.user.uploadFileUrl
        return {
        myHeaders: { Authorization: token },
        headers: {},
        imageUrl: '',
        imgUrl: this.$store.getters.updateURL,
        uploadUrl: uploadFileUrl,
        image: '',
        images: '',
        dialogImageUrl: '',
        searchSelectLoading: false,
        dialogVisible: false,
        disabled: false

        }
    },
    watch: {
    },
    created() {
        console.log(this.imgUrl)
    },
    methods: {
        // select变化调用
        selectChange(value, index, prop) {
            this.$emit('selectChange', value, index, prop)
        },
        // input的input事件
        inputINPUT(value, index, prop) {
            this.$emit('inputINPUT', value, index, prop)
        },
        // input的change事件
        inputChange(value, index, prop) {
            this.$emit('inputChange', value, index, prop)
        },
        // 搜索类型select搜索
        // remoteMethod(query, index, prop) {
        //   if (query) {
        //     this.searchSelectLoading = true
        //     this.$emit('querySelectValue', query, index, prop)
        //     setTimeout(() => {
        //       this.formObj[index].options = this.searchSelectOptionsCb
        //       this.searchSelectLoading = false
        //     }, 500)
        //   } else {
        //     this.searchSelectOptios = []
        //   }
        // },
        // switch变化
        formSwitchChange(val, index, prop) {
            this.$emit('formSwitchChange', val, index, prop)
        },
        // 按钮点击事件
        buttonClick(prop, index) {
            this.$emit('buttonClick', prop, index)
        },
        // 图片上传成功
        uploadImg(res, file, fileList, objbind) {
            if (res.code == -200 || res.code == 0) {
            console.log(res)
            this.image = URL.createObjectURL(file.raw)
            this.formData.image = res.data.id
            console.log(this.image)
        }
        },
        masterFileMax() {
            this.$message.warning(`最多上传 1 个文件。`)
        },
        // 图片集上传
        changeImages(file, fileList) {
        // this.fileList = fileList.slice(-3);
        },
        // 删除图片集
        removeImages(file, fileList) {
        const ids = []
        fileList.forEach(el => {
            // ids.push(el.response.data.id)
            ids.push(el.response.data.url)
        })

        //   console.log('删除图片的ids', ids)
        this.formData.multiImages = fileList
        //   this.formData.multiImages.forEach(el => {
        //     ids.push(el.response.data.id)
        //   })
        //   this.formData.multiImages = ids
        console.log('删除图片的ids', this.formData.multiImages)
        },
        // 文件上传成功回调
        uploadSuccess(response, file, fileList, limit, prop, index) {
        //   this.formObj[index].uploadObj.hideUpload = fileList.length == limit
        // 文件列表变化后判断当前文件列表长度是否等于限制长度。目的，当长度相等时隐藏文件上传按钮
        this.pushUpload(file, fileList, limit, prop)
        console.log('上传成功的回调', fileList)
        //   const ids = []
        //   fileList.forEach(el => {
        //     ids.push(el.response.data.url)
        //   })
        this.formData.multiImages = fileList
        //   this.formData.multiImages.forEach(el => {
        //     ids.push(el.response.data.id)
        //   })
        //   this.formData.multiImages = ids
        console.log('上传成功图片的ids', this.formData.multiImages)
        },
        // 文件删除
        handleRemove(file, fileList, limit, prop, index) {
        this.formObj[index].uploadObj.hideUpload = fileList.length == limit
        // 文件删除后判断当前文件列表长度是否等于限制长度。目的，当长度相等时隐藏文件上传按钮
        this.pushUpload(file, fileList, limit, prop)
        },
        // 文件预览
        handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
        },

        // 提交时验证表单，直接在父级调用
        submitForm() {
        let formValidate = Boolean
        this.$refs.ruleForm.validate((valid) => {
            if (valid) {
            formValidate = true
            } else {
            this.$message.warning('请把信息填写完整！')
            formValidate = false
            }
        })
        return formValidate
        },
        /* 清空表单
                    逻辑：
                    1 、如果要清空文件上传列表，要传入要清空的upload的字段名，假如多个upload用for循环，调用清空方法！
                    2、清空upload之后，还要把upload上传框展示出来，通过字段名比对，获取到在formObj中的下标，通过下标操作对象属性，进行展示
                */
        resetForm(uploadArr) {
        this.$refs.ruleForm.resetFields()
        if (uploadArr) {
            for (let i = 0;i < uploadArr.length;i++) {
            this.$refs[uploadArr[i]][0].clearFiles()
            const index = this.formObj.findIndex(item => item.prop == uploadArr[i])
            this.formObj[index].uploadObj.hideUpload = false
            }
        }
        },
        // 单个字段验证
        validateFieldProp(prop) {
        let formValidate = Boolean
        this.$refs.ruleForm.validateField(prop, valid => {
            if (!valid) {
            formValidate = true
            } else {
            formValidate = false
            }
        })
        return formValidate
        },
        // 对文件上传，删除进行赋值，调用form验证
        pushUpload(file, fileList, limit, prop) {
        if (fileList.length > 0) {
            this.formData[prop] = fileList
        } else {
            // 表示没有数据,把字段置空
            this.formData[prop] = ''
        }
        this.$refs.ruleForm.validateField(prop)// 调用验证form表单的文件上传
        }
        // 地图input的input事件
        // aMapInput(value, prop) {
        //   this.$refs[`aMap${prop}`][0].getSearch(value)
        // },
        // 子组件返回地图搜索值
        // cbSearch(val, prop) {
        //   this.setSearchVal = val.tips // 子组件
        //   this.searchShow = prop // 显示input输入联想
        // },
        // 选中地图值
        // selectVal(val, prop, index) {
        //   // 赋值的时候，拿到键，及formobj的下标，进行赋值
        //   this.formData[prop] = val.name // input输入框赋值
        //   this.formData.district = val.district // 传入省市区
        //   const lngLat = {
        //     lng: val.location.lng,
        //     lat: val.location.lat
        //   }
        //   this.formData[`${prop}location`] = lngLat
        //   this.searchShow = '' // 隐藏input输入联想
        // }

    }
}
</script>

<style>

.el-textarea {
width: 400px;
}
.el-upload--picture-card{
width: 128px;
height: 128px;
}
.avatar-uploader .avatar{
width: 128px;
}

.amap_div {
overflow: hidden;
height: 400px;
width: 600px;
position: relative;
}
.amap_div .sreach_ul {
position: absolute;
top: 1;
background-color: white;
z-index: 9;
min-width: 210px;
float: auto;
height: 200px;
overflow: auto;
padding: 0 20px;
line-height: 24px;
}
</style>
